<template>
    <view class="container" v-if="isData">
        <!-- 头部背景图 -->
        <view class="dealer-bg">
            <image mode="widthFix" :src="background"></image>
        </view>

        <!-- 填写申请信息 -->
        <block v-if="!is_applying">
            <view class="dis-flex flex-dir-column flex-y-center">
                <view class="widget-form b-f m-top20 dis-flex flex-dir-column">
                    <view class="form-title f-30">{{ words.apply.words.title.value }}</view>
                    <view class="form-box dis-flex flex-dir-column">
                        <form @submit="formSubmit" :report-submit="true">
                            <view class="form-field dis-flex flex-y-center">
                                <view class="field-label">邀请人</view>
                                <view class="field-input">
                                    <text>{{ referee_name }}（请核对）</text>
                                </view>
                            </view>
                            <view class="form-field dis-flex flex-y-center">
                                <view class="field-label">姓名</view>
                                <view class="field-input flex-box">
                                    <input name="name" placeholder="请输入真实姓名" :value="name" />
                                </view>
                            </view>
                            <view class="form-field dis-flex flex-y-center">
                                <view class="field-label">手机号</view>
                                <view class="field-input flex-box">
                                    <input name="mobile" placeholder="请输入手机号" :value="mobile" />
                                </view>
                            </view>
                            <!-- 申请协议 -->
                            <view class="form-license dis-flex flex-x-center flex-y-center">
                                <view class="license-radio dis-flex flex-y-center" @tap.stop.prevent="toggleSetRead">
                                    <text :class="'license-icon  ' + (is_read ? 'c-violet' : 'col-bb') + ' f-38 iconfont icon-radio'"></text>
                                    <text class="f-28 col-80">我已阅读并了解</text>
                                </view>
                                <text @tap.stop.prevent="toggleApplyLicense" class="f-28 c-violet">【{{ words.apply.words.license.value }}】</text>
                            </view>
                            <!-- 立即申请 -->
                            <view class="form-submit dis-flex flex-x-center">
                                <button formType="submit" :disabled="disabled">{{ words.apply.words.submit.value }}</button>
                            </view>
                        </form>
                    </view>
                </view>
            </view>
            <zan-dialog id="zan-base-dialog"></zan-dialog>
        </block>

        <!-- 等待审核 -->
        <view v-if="is_applying" class="dealer-boot dis-flex flex-dir-column flex-y-center">
            <view class="boot__msg f-30 dis-flex flex-dir-column flex-y-center">
                <text class="msg__icon iconfont icon-shenhezhong"></text>
                <text class="msg__content m-top20 f-29 col-80">{{ words.apply.words.wait_audit.value }}</text>
            </view>
            <!-- 去商城逛逛 -->
            <view class="boot__submit form-submit dis-flex flex-x-center">
                <form @submit="navigationToIndex" :report-submit="true">
                    <button formType="submit">{{ words.apply.words.goto_mall.value }}</button>
                </form>
            </view>
        </view>
    </view>
</template>

<script>
import zanDialog from '@/pages/dialog/index';
const app = getApp();
const Dialog = require('../../dialog/dialog');
export default {
    components: {
        zanDialog
    },
    data() {
        return {
            is_read: false,
            disabled: false,
            isData: false,
            background: '',
            is_applying: '',

            words: {
                apply: {
                    words: {
                        title: {
                            value: ''
                        },

                        license: {
                            value: ''
                        },

                        submit: {
                            value: ''
                        },

                        wait_audit: {
                            value: ''
                        },

                        goto_mall: {
                            value: ''
                        }
                    }
                }
            },

            referee_name: '',
            name: '',
            mobile: ''
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        // 获取分销商申请状态
        this.getApplyState();
    },
    methods: {
        /**
         * 获取分销商申请状态
         */
        getApplyState: function () {
            let that = this;
            app.globalData._get(
                'user.dealer/apply',
                {
                    referee_id: that.getRefereeid()
                },
                function (result) {
                    let data = result.data;
                    // 当前是否已经为分销商
                    if (data.is_dealer) {
                        uni.redirectTo({
                            url: '../index/index'
                        });
                    }

                    // 设置当前页面标题
                    uni.setNavigationBarTitle({
                        title: data.words.apply.title.value
                    });
                    data.isData = true;
                    that.setData(data);
                }
            );
        },

        /**
         * 显示申请协议
         */
        toggleApplyLicense: function () {
            Dialog({
                title: '申请协议',
                message: this.license,
                selector: '#zan-base-dialog',
                buttons: [
                    {
                        text: '我已阅读',
                        color: 'red',
                        type: 'cash'
                    }
                ]
            }).then(() => {
                // console.log('=== dialog resolve ===', 'type: confirm');
            });
        },

        /**
         * 已阅读
         */
        toggleSetRead: function () {
            this.setData({
                is_read: !this.is_read
            });
        },

        /**
         * 提交申请
         */
        formSubmit: function (e) {
            let that = this;
            let values = e.detail.value; // 记录formId
            app.globalData.saveFormId(e.detail.formId);

            // 验证姓名
            if (!values.name || values.name.length < 1) {
                app.globalData.showError('请填写姓名');
                return false;
            }

            // 验证手机号
            if (!/^\+?\d[\d -]{8,12}\d/.test(values.mobile)) {
                app.globalData.showError('手机号格式不正确');
                return false;
            }

            // 验证是否阅读协议
            if (!that.is_read) {
                app.globalData.showError('请先阅读分销商申请协议');
                return false;
            }

            // 按钮禁用
            that.setData({
                disabled: true
            });

            // 数据提交
            app.globalData._post_form(
                'user.dealer.apply/submit',
                values,
                function () {
                    // 获取分销商申请状态
                    that.getApplyState();
                },
                null,
                function () {
                    // 解除按钮禁用
                    that.setData({
                        disabled: false
                    });
                }
            );
        },

        /**
         * 去商城逛逛
         */
        navigationToIndex: function (e) {
            // 记录formId
            app.globalData.saveFormId(e.detail.formId);
            // 跳转到首页
            uni.switchTab({
                url: '/pages/index/index'
            });
        },

        /**
         * 获取推荐人id
         */
        getRefereeid: function () {
            return uni.getStorageSync('referee_id');
        }
    }
};
</script>
<style>
@import './apply.css';
</style>
